import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 17:40:06
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2022-12-29 11:07:50
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\StockNumber.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Column } from '@antv/g2plot';
import { useEffect, useState } from 'react';
import styles from './stockNumber.module.less';
export const getRemFontSize = () => Number(document.documentElement.style.fontSize.replace('px', ''));
export default (props) => {
    const { data } = props;
    const [fontSize, setFontSize] = useState(16);
    const [chart, setChart] = useState();
    useEffect(() => {
        window.addEventListener('resize', changeSize);
        changeSize();
    }, []);
    const changeSize = () => {
        const screenWidth = window.innerWidth;
        if (screenWidth < 1280) {
            setFontSize(16);
        }
        else {
            setFontSize(28);
        }
    };
    useEffect(() => {
        const columnPlot = new Column('stockDom', {
            data: [],
            xField: 'type',
            yField: 'sales',
            // width: 500,
            autoFit: true,
            tooltip: false,
            label: {
                // 可手动配置 label 数据标签位置
                position: 'middle',
                // 配置样式
                // style: {
                //   fill: '#FFFFFF',
                //   opacity: 1
                // },
                layout: [
                    // 柱形图数据标签位置自动调整
                    { type: 'interval-adjust-position' },
                    // 数据标签防遮挡
                    { type: 'interval-hide-overlap' }
                    // 数据标签文颜色自动调整
                    // { type: 'adjust-color' }
                ]
            },
            color: '#0EC5DF',
            // color: ({ type }) => {
            //   if (type.includes('黑色')) {
            //     return '#000000'
            //   }
            //   return '#0EC5DF'
            // },
            xAxis: {
                label: {
                    autoHide: true,
                    autoRotate: false,
                    style: {
                        // lineHeight: 20,
                        fill: '#FFFFFF',
                        fontSize: fontSize
                    }
                }
            },
            yAxis: {
                range: [0, 0.8],
                title: {
                    text: '件数',
                    autoRotate: false,
                    position: 'end',
                    offset: 20,
                    style: {
                        fontSize: fontSize,
                        fill: '#FFFFFF'
                    }
                },
                label: {
                    style: {
                        fontSize: fontSize,
                        fill: '#FFFFFF'
                    }
                },
                grid: {
                    line: {
                        style: {
                            lineWidth: 1,
                            lineDash: [2, 5]
                        }
                    }
                }
            },
            meta: {
                type: {
                    alias: '款色码'
                },
                sales: {
                    alias: '件'
                }
            },
            maxColumnWidth: 48
        });
        columnPlot.render();
        setChart(columnPlot);
    }, []);
    useEffect(() => {
        if (chart) {
            const barData = [];
            data.forEach((item) => {
                barData.push({
                    styleCode: item.styleCode,
                    color: item.color,
                    type: `${item.styleCode}\n${item.color}_${item.size}`,
                    sales: item.stockAmount
                });
            });
            chart.update({
                data: barData
            });
        }
    }, [chart, data]);
    useEffect(() => {
        window.addEventListener('resize', resize);
        resize(); // 初始化
        return () => {
            window.removeEventListener('resize', resize);
        };
    }, [chart]);
    const resize = () => {
        if (!chart)
            return;
        chart.update({
            label: {
                style: {
                    fontSize: getRemFontSize() * 1,
                    fill: '#FFF'
                }
            },
            xAxis: {
                label: {
                    style: {
                        fontSize: getRemFontSize() * 1,
                        lineHeight: getRemFontSize() * 1.45
                    }
                }
            },
            yAxis: {
                label: {
                    style: {
                        fontSize: getRemFontSize() * 1.25
                    }
                },
                title: {
                    style: {
                        fontSize: getRemFontSize() * 1.25
                    }
                }
            },
            maxColumnWidth: getRemFontSize() * 3
        });
    };
    return (_jsxs("div", { className: styles.container, children: [_jsx("header", { className: styles.stockHeader, children: "\u5927\u70EB\u5E93\u5B58\u91CF" }), _jsx("div", { id: "stockDom", className: styles.stockBox })] }));
};
